<template>
  <div class="login_container">
    <el-row>
      <!-- Element plus栅格占用24个格子,一边占12，只要屏幕小于768，左边占0，右边占24 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <!-- 登录的表单 -->
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login_btn" type="primary" size="default" :loading="loading" @click="login">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus/lib/components/index.js'
// 引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
// 引入获取时间的模块
import { getTime } from '@/utils/time'
let useStore = useUserStore()
// 获取路由器
let $router = useRouter()
// 获取路由对象
let $route = useRoute()

// 控制用户点击登录按钮是否会有一个加载的效果
let loading = ref(false)
// 存放表单数据以及表单校验可以使用
let loginForm = reactive({ username: 'admin', password: 'atguigu123' })

const validatorUserName = (_: any, value: any, callback: any) => {
  // rule: 校验规则对象
  // value: 表单元素文本内容
  // 函数: 如果符合条件callBack放行通过；如果不符合条件，通过callBack方法注入错误提示信息
  if (/^\w{5,15}$/.test(value)) {
    callback()
  } else {
    callback(new Error(`账号长度至少五位,必须为字母数字或者下划线开头`))
  }
}

const validatorPassword = (_: any, value: any, callback: any) => {
  // rule: 校验规则对象
  // value: 表单元素文本内容
  // 函数: 如果符合条件callBack放行通过；如果不符合条件，通过callBack方法注入错误提示信息
  if (value.length >= 6) {
    callback()
  } else {
    callback(new Error('密码长度至少六位'))
  }
}

// 定义表单校验的配置对象
// blur:在失焦时触发；change：在文本发生变化时触发
const rules = reactive({
  username: [
    { blur: 'change', validator: validatorUserName },
    // { min: 5, max: 5, message: '用户名长度最小为5位', trigger: 'blur' },
  ],
  password: [
    { blur: 'change', validator: validatorPassword },
    // { min: 6, max: 15, message: '密码长度最小为6位', trigger: 'change' },
  ],
})
// 获取el-form组件实例
let loginForms = ref()

const login = async () => {
  // 点击登录按钮做什么
  // 通过仓库发登录请求
  // 请求成功，首页展示数据的地方
  // 请求失败，弹出登录失败 信息

  // 保证所有的表单校验通过之后再发送请求（校验不通过，代码不往下走了）
  await loginForms.value.validate()

  // 开始加载
  loading.value = true
  try {
    await useStore.userLogin(loginForm) // 会返回一个异步Promise对象
    // 注意这一步是为了获取当前用户所有有权限的路由，为了后续附带url跳转做准备
    await useStore.userInfo()
    // 在登录的时候进行判断，路由当中如果有query参数就往query参数跳转，如果没有就往首页跳转
    let redirect: any = $route.query.redirect
    $router.push({ path: redirect || '/' })

    // 登录成功提示信息
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI,${getTime()}好`,
    })
  } catch (error) {
    // 登录失败提示信息
    ElNotification({
      type: 'error',
      // message: error.message  直接这样写，由于没有定义error的类型会飘红，我们采用下面断言的方式
      message: (error as Error).message,
    })
  } finally {
    // 不管登录是成功还是失败，都要结束加载中
    loading.value = false
  }
}
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url('@/assets/images/background.jpg');
  background-size: cover;
  padding: 40px;

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 10px;
  }

  .login_btn {
    width: 100%;
  }
}
</style>
